<template>
  <el-dialog
    append-to-body
    :before-close="cancel"
    :visible.sync="value">
    <template slot="title">
      {{title}}
    </template>
    <el-form :model="form" ref="refForm" :label-width="'150px'">
    <el-dialog
      title="拒绝发放"
      v-if="innerVisible"
      :visible.sync="innerVisible"
      append-to-body>
        <el-form-item prop="remark" label="备注">
          <el-input v-model="form.remark" @keyup.enter.native="auditRefuse"></el-input>
        </el-form-item>
        <el-alert
          title=""
          type="error"
          :closable="false"
          description="拒绝发放后，代理则无法获取本月的代理佣金。" >
        </el-alert>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="innerVisible = false">取消</el-button>
        <el-button type="primary" @click="auditRefuse">确认</el-button>
      </div>
    </el-dialog>
      <el-form-item v-if="step == 2" prop="remark" label="初审备注">
        <el-col :span="16">
          <el-input readonly v-model="firstRemark"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item prop="remark" label="备注">
        <el-col :span="16">
          <el-input v-model="form.remark" @keyup.enter.native="auditSuccess"></el-input>
        </el-col>
      </el-form-item>
      <el-alert
        title=""
        type="error"
        v-if="step == 2"
        :closable="false"
        :description="noticeStr" >
      </el-alert>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="success"  @click="auditSuccess">通过</el-button>
      <el-button type="danger" @click="innerVisible = true">拒绝发放</el-button>
    </div>
  </el-dialog>

</template>

<script>
  import {updateApproveFirst,updateApproveSecond} from '@/services/api/commission'
  import {form} from '@/build'

  export default {
    name: "commission-audit-dialog",
    props:['value','status','id','step','firstRemark'],
    mixins:[form],
    data(){
      return{
        innerVisible: false,
        noticeStr: '',
        form:{
          status: undefined,
          ids: this.id,
          remark:'',
        },
        refRules:{
          refuse:{required:true,message:'拒绝发放理由为必填'},
          remark:{required:true,message:'审核备注为必填'},
        }
      }
    },
    methods:{
      auditSuccess(){
        this.form.status = 1
        this.doSave({action: 'saveForm', form: 'refForm'})
      },
      cancel(){
        this.$emit('input', false);
      },
      auditRefuse(){
        this.form.status = 2
        this.doSave({action: 'saveForm', form: 'refForm'})
      }
    },
    computed: {
      title() {
        if(this.step === 1){
          this.noticeStr = '数据在没有初审之前，代理无法在自己的佣金报表看到这条月结记录。初审完成后，数据将出现在代理佣金报表，代理则可以看到本期佣金数据，也可以对数据进行申诉'
          return '初审'
        }
        this.noticeStr = '终审一旦通过之后，则系统会自动发放佣金至代理的账户余额中，请核对并确保数据完全正确，以及确定代理是否是正常代理。'
        return '终审'
      }
    },
    mounted(){
      let API = this.step === 1 ? updateApproveFirst : updateApproveSecond
      this.bindSave(API,'saveForm','form',{
          afterSuccess: () => {
          this.cancel();
          this.$parent.getAll();
        }
      })
    }
  }
</script>

<style scoped>

</style>
